<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>知乎热榜</title>
        <style>
            *{
                margin:0;padding:0;box-sizing: border-box;
            }
            hr{
                margin: 10px auto;
            }
            body{
                background: #ccc;
            }
            .container{
                width: 700px;
                margin: 50px auto;
                background: white;
                padding: 15px;
            }
            .item{
                padding: 15px;
                border-bottom: solid 1px #ddd;
            }
            .item .order{
                width: 5%;
                float:left;
            }
            .item::after{
                content: '';
                display: block;
                clear:both;
            }
            .item h3{
                font-weight: normal;
                font-size: 16px;
            }
            .item .info{
                width: 60%;
                float:left;
                height: 120px;
                display:flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .item .img{
                width: 30%;
                float:right;
            }
            .item .hot{
                font-size: 14px;
            }
            img{
                width: 100%;
            }

            .item .wide{
                width: 90%;
            }
        </style>
    </head>

    <body>
        <div id="root">
            
        </div>
        <script src="./js/react.development.js"></script>
        <script src="./js/react-dom.development.js"></script>
        <script src="./js/babel.min.js"></script>
        <script type="text/babel">
            let data = [
                {
                    id: "0_1628426974.6828957",
                    title: "如何看待北京野生动物园通报，游客因琐事发生撕打，引发附近动物效仿？动物真的会模仿这类行为吗？",
                    img: "https://pic1.zhimg.com/80/v2-22886300464f5a2f7e002e40392dc7cb_1440w.jpg?source=1940ef5c",
                    hot: "1504 万领域热度",
                },
                {
                    id: "1_1628426974.6836996",
                    title: "联合利华中国区副总裁曾锡文称梦龙事件是「无妄之灾」，对此你如何评价？",
                    img: "https://pic1.zhimg.com/80/v2-14067671559a9f20bc2a349cac69ec96_1440w.png",
                    hot: "862 万领域热度",
                },
                {
                    id: "2_1628426974.6843448",
                    title: "因禄口机场疫情防控不力，南京市卫健委主任被免职，副市长被记过处分，还有哪些信息值得关注？",
                    img: "https://pic2.zhimg.com/80/v2-bf056df27e6e6edadb1ee4a11ac06e60_720w.png",
                    hot: "742 万领域热度",
                },
                {
                    id: "3_1628426974.685571",
                    title: "上海电气总裁黄瓯跳楼自尽，有哪些值得关注的信息？这会对上海电气有哪些影响？",
                    img: "https://pic2.zhimg.com/80/v2-a08de40b4bacb53c1d4be86752e8b8c1_1440w.png",
                    hot: "688 万领域热度",
                },
                {
                    id: "4_1628426974.6863558",
                    title: "郑州一医生确诊，前 7 次检测结果为阴，第 8 次才显阳，德尔塔具有高隐蔽性吗？防范还需要注意什么？",
                    img: "https://pic3.zhimg.com/v2-33146c5a7c499464396c120d8afa0969_720w.jpg?source=2044ae36",
                    hot: "401 万领域热度",
                },
                {
                    id: "5_1628426974.687",
                    title: "8 月 7 日，江苏新增本土确诊 38 例，其中扬州 36 例，目前情况如何？有哪些信息值得关注？",
                    img: "https://picb.zhimg.com/50/v2-a8a242a31e99275f90e871b600890c6a_b.jpg",
                    hot: "127 万领域热度",
                },
                {
                    id: "6_1628426974.6875176",
                    title: "在家里阳台种满花草是一种什么样的体验？",
                    img: "https://pic1.zhimg.com/50/v2-488e63324e50356e2ba5da6fdf4aea8c_b.jpg",
                    hot: "87 万领域热度",
                },
                {
                    id: "7_1628426974.6881711",
                    title: "如何看待女子撞伤右肩被做左肩手术，医院称「确实发生医疗失误」？涉事医生及医院将承担哪些责任？",
                    hot: "77 万领域热度",
                },
                {
                    id: "8_1628426974.6887908",
                    title: "升学宴该怎么致辞？",
                    img: "https://pic3.zhimg.com/50/v2-7f1afe199bab972719ca3878061db54a_b.jpg",
                    hot: "59 万领域热度",
                },
                {
                    id: "9_1628426974.6892145",
                    title: "客机为什么不用飞翼式气动外形？",
                    img: "https://pic1.zhimg.com/50/v2-c3af29735119276b70b0c36a5ac12371_b.jpg",
                    hot: "52 万领域热度",
                },
                {
                    id: "10_1628426974.6895468",
                    title: "为什么骑很多种类的马，但是没有人骑斑马？",
                    img: "https://pic3.zhimg.com/v2-7f4e3dea8f103a43764d72fa814409fc.jpg?source=2044ae36",
                    hot: "48 万领域热度",
                },
                {
                    id: "11_1628426974.689924",
                    title: "怎样很快彻底的忘记一个人？",
                    img: "",
                    hot: "46 万领域热度",
                },
                {
                    id: "12_1628426974.6901717",
                    title: "熬夜熬习惯了，晚上睡不着怎么办？",
                    img: "https://pic3.zhimg.com/50/v2-43420ee179aaa5bc93d95099a36a82c3_b.jpg",
                    hot: "45 万领域热度",
                },
                {
                    id: "13_1628426974.6904864",
                    title: "各个时代都有哪些占据绝对优势的「顶级掠食者」？",
                    img: "https://picb.zhimg.com/50/v2-076f9409cfb4a13616de67324bab3ddc_b.jpg",
                    hot: "36 万领域热度",
                },
                {
                    id: "14_1628426974.6908004",
                    title: "如何看待新冠「拉姆达」变异毒株或可逃避中和抗体？人类想要战胜疫情该怎样努力？",
                    img: "https://pica.zhimg.com/80/v2-fde3e85895709e1af6146bf15e4b216d_1440w.jpg?source=1940ef5c",
                    hot: "35 万领域热度",
                },
            ];
                
            class App extends React.Component {
                render(){
                    return <div className="container">
                        <h2>知乎热榜</h2>
                        <hr />
                        <div className="topic-list">
                            {
                                data.map((item, index) => {
                                    return <div className="item" key={item.id}>
                                                <div className="order">{index + 1}</div>
                                                <div className={"info "+ (item.img ? '' : 'wide')}>
                                                    <h3>{item.title}</h3>
                                                    <div className="hot"> <svg class="Zi Zi--Hot" fill="currentColor" viewBox="0 0 24 24" width="18" height="18"><defs><linearGradient id="id-2014200654-a" x1="63.313%" x2="46.604%" y1="-13.472%" y2="117.368%"><stop offset="2.35%" stop-color="#EC471E"></stop><stop offset="100%" stop-color="#FF6DC4"></stop></linearGradient></defs><path fill="url(#id-2014200654-a)" d="M14.553 20.78c.862-.651 1.39-1.792 1.583-3.421.298-2.511-.656-4.904-2.863-7.179.209 2.291.209 3.73 0 4.314-.41 1.143-1.123 1.983-1.91 2.03-1.35.079-2.305-.512-2.863-1.774-.676 1.25-.782 2.556-.318 3.915.31.906.94 1.684 1.89 2.333C7.144 20.131 5 17.336 5 14.022c0-2.144.898-4.072 2.325-5.4.062 2.072.682 3.598 2.13 4.822-.67-1.112-.734-2.11-.734-3.517 0-3.253 2.067-6.007 4.913-6.927a7.35 7.35 0 0 0 2.157 4.918C17.722 9.214 19 11.463 19 14.022c0 3.073-1.844 5.7-4.447 6.758z" fill-rule="evenodd"></path></svg>{item.hot}</div>
                                                </div>
                                                {
                                                    item.img && <div className="img">
                                                                    <img src={item.img} alt="" />
                                                                </div>
                                                }
                                                
                                            </div>
                                })
                            }
                        </div>
                    </div>
                }
            }

            ReactDOM.render(<App />, document.querySelector('#root'));
        </script>
    </body>
</html>
